<template>
  <div class="container">
    <dv-border-box-11 title="无人机视频" >
      <select v-model="selectedVideoPath" @change="updateVideo" class="video-select">
        <option value="" disabled selected>请选择</option>
        <option v-for="videoPath in videoPaths" :key="videoPath" :value="videoPath.url">{{ videoPath.name }}</option>
      </select>
      <video :src="videoUrl" controls class="video" @click="goToVideoList"></video>
    </dv-border-box-11>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      selectedVideoPath: '', // 用户选择的图片路径
      videoPaths: [], // 图片列表
      videoUrl: './testvideo.mp4' // 替换为你的视频路径
    };
  },
  created() {
    console.log('created开始加载left2....')
    this.getVideoList()
  },
  methods: {
    updateVideo() {
      // 当用户选择了新的图片路径时，更新imageUrl
      this.videoUrl = this.selectedVideoPath;
    },
    goToVideoList() {
      event.preventDefault();
      this.$router.push('/index/video-list'); // 使用路由名跳转
    },
    async getVideoList() {
      try {
        // 获取视频数据
        const response1 = await axios.get('http://localhost:8080/videos/getAll')
        console.log('left2查询video的response.data = ', response1.data)
        if (response1.code === '0') {
          this.videoPaths = response1.data
          this.videoUrl = response1.data[0].url
        } else {
          // 查询失败
          this.$message.success('查询video失败')
        }
      } catch (error) {
        this.$message.success('查询video失败')
      }
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 95%;
  position: relative;
  overflow: hidden;
}

.video {
  margin-top: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 85%;
  object-fit: contain;
  z-index: 2;
}

.text-box {
  position: absolute;

  top: 10%;
  left: 50%;
  width: 55%;
  height: 50px;
  font-size: 20px;
  transform: translate(-50%, -50%);

  text-align: center;
  z-index: 1; /* 确保文本框在视频上方 */
  color: #005eff;
}
.video-select {
  margin-left: 10px;
  margin-top: 0px;
  width: 100px;
  height:22px;
  overflow: auto;
  font-size: 12px; /* 设置字体大小 */
  background-color: transparent; /* 设置按钮背景为透明 */
  color: white;
}
.video-select option {
  color: black;
  max-height: 200px; /* 限制下拉框的最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}
</style>
